<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#div1 {
				width: 400px;
				height: 200px;
				background: gray;
				overflow: hidden;
				margin: 50px;
				position: relative;
			}
			
			#div2 {
				width: 300px;
				height: 100px;
				background: green;
				margin: 50px;
				color: #fff;
				padding: 10px;
			}
			
			#params {
				height: 100px;
				width: 800px;
				padding: 20px;
			}
			
			.btn {
				height: 50px;
				margin-left: 100px;
				margin-left: 100x;
				padding: 0 20px;
				margin-top: 10px;
			}
		</style>
	</head>

	<body style="height: 2000px;">
		<h3>计算div2距离视口各边的距离</h3>
		<div id="div1">
			<div id="div2">
				视口: 移动前端中常说的viewport（视口）就是浏览器显示页面内容的屏幕区域(眼睛看得见的部分)。
			</div>
		</div>

		<hr />
		<button class="btn" onclick="getParams();">取div2相对视口的数据</button>

	</body>

	<script type="text/javascript">
		var div2 = document.getElementById("div2");
		//getBoundingClientRect()  获取可视距离
		// top：元素上边到视窗上边的距离;
		// right：元素右边到视窗左边的距离;
		// bottom：元素下边到视窗上边的距离;
		// left：元素左边到视窗左边的距离;
		//滚动界面,可视距离发生了变化
		// 获取元素相对视口的数据
		function getParams() {
			var viewport = div2.getBoundingClientRect();
			// console.log(viewport);
			// 把对象转换为json字符串
			console.log('.div2到上边界的距离', viewport.top);
			console.log('.div2到左边界的距离', viewport.left);
		}
		// 运行一次
		getParams();
	</script>

</html>